import React from 'react';
import { Breadcrumb } from 'antd';
import { useLocation } from 'react-router-dom';
import { Link } from 'react-router-dom';

function CustomBreadcrumb() {
  const location = useLocation();
  const pathSnippets = location.pathname.split('/').filter(i => i);

  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
    const breadcrumbName = getBreadcrumbName(url);
    
    return {
      key: url,
      title: <Link to={url}>{breadcrumbName}</Link>
    };
  });

  const breadcrumbItems = [
    {
      title: <Link to="/">首页</Link>,
      key: 'home'
    },
    ...extraBreadcrumbItems
  ];

  function getBreadcrumbName(path) {
    switch (path) {
      case '/':
        return '首页';
      case '/users':
        return '用户列表';
      case '/roles':
        return '角色列表';
      case '/about':
        return '关于';
      default:
        return path;
    }
  }

  return (
    <Breadcrumb items={breadcrumbItems} />
  );
}

export default CustomBreadcrumb;